<template>
    <div class="editor-prompt">
        <editor-title title="歌曲描述" required />

        <!-- 输入框 -->
        <div class="bg-[var(--el-bg-color-page)] rounded-md">
            <el-input
                v-model="value"
                :rows="4"
                :input-style="{
                    boxShadow: 'unset',
                    backgroundColor: 'transparent'
                }"
                resize="none"
                type="textarea"
                placeholder="请输入描述"
            />

            <div class="flex justify-between p-2 pb-1.5">
                <div></div>
                <el-button
                    v-if="0 > 1"
                    type="default"
                    :link="true"
                    class="!font-normal !text-sm !text-tx-secondary !hover:text-primary"
                    @click="clearPrompt"
                >
                    <icon name="el-icon-Refresh" />
                    <em class="ml-[3px]">翻译成英文</em>
                </el-button>
                <el-button
                    type="primary"
                    :link="true"
                    class="!font-normal !text-sm"
                    @click="clearPrompt"
                >
                    <icon name="el-icon-Delete" />
                    <em class="ml-[3px]">清空</em>
                </el-button>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { useVModels } from '@vueuse/core'
import editorTitle from './editor-title.vue'

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = withDefaults(
    defineProps<{
        modelValue: string | undefined;
    }>(),
    {}
)

const { modelValue: value } = useVModels(props, emits)

const clearPrompt = () => {
    value.value = ''
}
</script>
